<template>
  <div>
    <h1>商品列表</h1>
    <!-- <ul class="con">
      <li v-for="(item, index) in list" :key="index">
        <img :src="item.img" alt="" />
        <p>{{ item.name }}</p>
        <span>{{ item.price }}</span>
      </li>
    </ul> -->
    <!-- 不封装子组件的写法  -->

    <div class="con">
      <goodItem
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        @del="del"
      ></goodItem>
    </div>
    <!-- item是一个父传子 把单个商品的数据传过去 -->
  </div>
</template>
<script>
import goodItem from "../components/goodItem.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          img: "04.jpg",
          name: "猪猪男孩素颜霜",
          price: 200,
        },
        {
          id: 2,
          img: "02.jpg",
          name: "ysl口红",
          price: 300,
        },
        {
          id: 3,
          img: "03.jpg",
          name: "aj",
          price: 2000,
        },
        {
          id: 4,
          img: "01.jpg",
          name: "巴少",
          price: 2000000000000,
        },
        {
          id: 5,
          img: "05.jpg",
          name: "香奈儿香水",
          price: 800,
        },
      ],
    };
  },
  components: {
    goodItem,
  },
  methods: {
    del(id) {
      console.log(id);
      this.list.forEach((item, index) => {
        if (item.id == id) {
          this.list.splice(index, 1);
        }
      });
      //删除 用id删除
    },
  },
};
</script>
<style lang="scss">
.con {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li {
    width: 48%;
    background: #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    img {
      width: 80%;
      height: 300px;
    }
  }
}
</style>
